import React from 'react';
import { Link,Route, useHistory } from 'react-router-dom';
import { useState } from 'react';
import './Content.css';
import Users from './Users';
import Posts from './Posts';
import UpdateMy from './UpdateMy';
import logo from '../images/logo.jpg'
import { Collapse } from 'antd';

const { Panel } = Collapse;

const Content = () => {
  const history = useHistory();
  const [colorList, setColorList] = useState(
    [
      'white',
      'white',
      'white',
      'white',
      'black',
      'black',
      'black',
      'black'
    ]
  );
  
  const btn4 = () => {
      history.push('/');
  }



  return (
    <div id='container'>
      <div id='top'>
        <img src={logo} />
        <p>管理员：{localStorage.getItem('admin')}</p>
      </div>

      <div id='bottom'>
        <div id="left">
          <Link onClick={() => setColorList(['#e2eaf5',
                                              'white',
                                              'white',
                                              'white',
                                              '#1890ff',
                                              'black',
                                              'black',
                                              'black'])} 
                  to='/home/user'>
            <button id="btn1" style={{backgroundColor: colorList[0], color: colorList[4]}}>
                用户管理
            </button>
          </Link>
          <Link onClick={() => setColorList(['white',
                                              '#e2eaf5',
                                              'white',
                                              'white',
                                              'black',
                                              '#1890ff',
                                              'black',
                                              'black'])} 
                  to='/home/posts'>
            <button id="btn2" style={{backgroundColor: colorList[1], color: colorList[5]}}>
              论坛管理
            </button>
          </Link>
          <Link onClick={() => setColorList(['white',
                                              'white',
                                              '#e2eaf5',
                                              'white',
                                              'black',
                                              'black',
                                              '#1890ff',
                                              'black'])} 
                  to='/home/updatemy'>
            <button id="btn3" style={{backgroundColor: colorList[2], color: colorList[6]}}>
              吃穿玩乐
            </button>
          </Link>
          <button id="btn4" onClick={btn4}>退出</button>
        </div>

        <div id="right">
          <Route path='/home/user' render={()=><Users />}/>
          <Route path='/home/posts' render={()=><Posts />} />
          <Route path='/home/updatemy' render={()=><UpdateMy />} />
        </div>
      </div>
  </div>
  )

}

export default Content
